﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Sudo Slider | Make your own effect</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <link rel="STYLESHEET" type="text/css" href="../css/style.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="../js/jquery.sudoSlider.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var callObject;
            // This is the animation code. This one is really simple.
            // You HAVE to call obj.callback() when you are done, and only when you are completely done.
            var ownEffect = function (obj) {
                callObject = obj;
                // Diff is the number of slides we are moving, negative if we are moving to the left.
                var overlay = $("<div class=\"sudo-box\" style=\"position:absolute;top:0;left:0;z-index:10000;opacity: 1 !important;\">THIS WILL BE REMOVED IN STOP FUNCTION!</div>");
                obj.slider.prepend(overlay);
                if (obj.diff < 0) {
                    // Make sure that everything you make in order to perform the animation is marked with the class "sudo-box".
                    // Otherwise SudoSlider might count it as a slide.
                    // Things marked with the class sudo-box will also be automaticly removed by the default stop() function.

                    obj.slider.fadeTo(2000, 0.5, function () {
                        obj.callback();
                    });
                } else {
                    // goToNext will make sure that the slider goes to the next slide immediately, you can then finish the effect.
                    // When doing this you would usually have a clone of the content on top of the slider.
                    obj.slider.fadeTo(500, 0.001, function () {
                        obj.goToNext();
                        obj.slider.fadeTo(500, 1, function () {
                            obj.callback();
                        });;
                    });

                    overlay.hide().show(1000);
                }
            }
            // When the slider needs to stop the animation, it will call this "sub-function".
            // If this is defined, it will always run when obj.callback() is called.
            // Or when the slider needs to stop the animation (that only happens the slider is being destroyed or the window is resized and responsive is on)
            // If not defined a default stop() animation will run, this is the "defaultStopFunction" in the main script.
            // The top function can also be specified by adding it as the property "stop" to the obj given in the effect.
            ownEffect.stop = function () {
                var slider = callObject.slider;
                $(".sudo-box", slider).remove();
                slider.fadeTo(0, 1);
                slider.stop();
            }
            // And then just specify the function as the effect.
            var sudoSlider = $("#slider").sudoSlider({
                effect: ownEffect,
                continuous:true,
                responsive: true,
                prevNext: false,
                numeric: true
            });
        });
    </script>
    <style>
        #container, #slider {width: auto; max-width: 1200px;}
        #slider, #slider li img {width: 100%;}
    </style>




</head>
<body>
<div id="container">
	<h1>Sudo Slider jQuery Plugin - Make your own effect</h1>
	<div style="position:relative;">
		<div id="slider">
			<ul>
                <li><img src="../images/01.jpg" alt="image description"/></li>
                <li><img src="../images/02.jpg" alt="image description"/></li>
                <li><img src="../images/03.jpg" alt="image description"/></li>
                <li><img src="../images/04.jpg" alt="image description"/></li>
                <li><img src="../images/05.jpg" alt="image description"/></li>
			</ul>
		</div>
	</div>
	<h3>Usage: See the source code, and read the comments</h3>
</div>

<div style="width:728px;height:90px;margin:0 auto;">
	<script type="text/javascript">
		<!--
		google_ad_client = "pub-8170632875475442";
		/* Sudo Slider, lang horisontal */
		google_ad_slot = "0149025622";
		google_ad_width = 728;
		google_ad_height = 90;
		//-->
	</script>
	<script type="text/javascript"
	src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
	</script>
</div>
<script type="text/javascript">
    /* Google Analytics, please remove
     var _gaq = _gaq || [];
     _gaq.push(['_setAccount', 'UA-20484420-1']);
     _gaq.push(['_trackPageview']);

     (function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
     })();
     /* */
</script>
</body>
</html>